 <template>
  <div class="emergencyTask-vue">
    <div class="main">
      <div class="left-block">
        <div class="task-description-wrapper">
          <CCol class="task-description-col">
            <div class="tab-header">
              <!-- <div class="left-group1"> -->
              <!-- <img src="../../public/img/分类条.png" alt class="selectimgstyle" /> -->
              <span class="tab-title">任务描述</span>
              <!-- </div> -->
            </div>
            <div class="task-description-row">
              <CRow class="descRow">
                <CInput
                  label="事件名称"
                  style="width: 385px"
                  horizontal
                  v-model="taskName"
                  :title="taskName"
                  disabled
                />
              </CRow>

              <CRow class="descRow">
                <CInput
                  label="时间"
                  style="width: 385px"
                  horizontal
                  v-model="taskTime"
                  :title="taskTime"
                  disabled
                />
              </CRow>
              <CRow class="descRow">
                <CInput
                  label="地点"
                  class="desc-select"
                  horizontal
                  v-model="TaskAddress"
                  :title="TaskAddress"
                  disabled
                />
              </CRow>
              <CRow class="descRow">
                <CInput
                  label="灾种"
                  class="desc-select"
                  horizontal
                  v-model="TaskDisasterType"
                  :title="TaskDisasterType"
                  disabled
                />
              </CRow>
            </div>
          </CCol>
        </div>
        <div class="spatial-region-wrapper1">
          <CCol class="task-monitor-col">
            <div class="tab-header">
              <!-- <img src="../../public/img/分类条.png" alt class="selectimgstyle" /> -->
              <span class="tab-title">空间范围</span>
            </div>

            <CRow class="task-monitorTable-row">
              <CButton color="info" class="btn" @click="regionOperator"
                >区划</CButton
              >
              <!-- <CButton color="info" class="btn" @click="drawOperator"
                >绘图</CButton
              > -->
              <CButton color="info" class="btn" @click="shpOperator"
                >shp</CButton
              >
              <CButton color="info" class="btn" @click="importantRegionOprator"
                >重点区域</CButton
              >
              <div v-show="regionBlock" class="regionBlock">
                <!-- :title="regionTitle" -->
                <Cascader
                  :data="regionCascader"
                  change-on-select
                  filterable
                  class="regionCas"
                  :load-data="loadRegionData"
                  @on-change="regionChangeEvent"
                ></Cascader>
                <CButton color="info" class="btn-sm" @click="addAreaResult"
                  >添加</CButton
                >
              </div>
              <div v-show="drawBlock" style="margin-top: 10px">
                <div style="display: flex">
                  <CButton color="info" class="btn" @click="drawRectangle"
                    >矩形</CButton
                  >
                  <CButton color="info" class="btn" @click="drawCircle"
                    >圆形</CButton
                  >
                  <CButton color="info" class="btn" @click="drawPolygon"
                    >多边形</CButton
                  >
                  <CButton color="info" class="btn" @click="reset"
                    >清空</CButton
                  >
                </div>
                <div style="margin-left: 12px; margin-top: -10px">
                  <Divider orientation="left">四角坐标</Divider>
                  <CInput
                    label="X1:"
                    style="width: 300px; margin: -12px 1px 3px 1px"
                    horizontal
                    v-model="x1"
                    :title="x1"
                  />
                  <CInput
                    label="X2:"
                    style="width: 300px; margin: 3px 1px"
                    horizontal
                    v-model="x2"
                    :title="x2"
                  />
                  <CInput
                    label="Y1:"
                    style="width: 300px; margin: 3px 1px"
                    horizontal
                    v-model="y1"
                    :title="y1"
                  />
                  <CInput
                    label="Y2:"
                    style="width: 300px; margin: 3px 1px"
                    horizontal
                    v-model="y2"
                    :title="y2"
                  />
                </div>
              </div>
              <div v-show="shpBlock" class="regionBlock">
                <Input
                  v-model="shpPath"
                  placeholder="添加shp矢量文件"
                  style="width: 200px"
                />
                <CButton color="info" class="btn-sm" @click="selecrShpPath"
                  >选择</CButton
                >
              </div>
              <div v-show="importantRegion" class="regionBlock">
                <!-- :title="regionTitle" -->
                <Cascader
                  :data="importantRegionCascader"
                  change-on-select
                  filterable
                  class="regionCas"
                  :load-data="loadImportantRegionData"
                  @on-change="importRegionChangeEvent"
                ></Cascader>
                <CButton color="info" class="btn-sm" @click="addImportantRegion"
                  >添加</CButton
                >
              </div>
            </CRow>
          </CCol>
        </div>

        <div class="same-period-wrapper">
          <CRow class="same-period-row">
            <span
              class="same-period-title"
              style="position: relative; top: 16px"
              >采集时间:</span
            >
            <el-date-picker
              style="position: relative; top: 8px; width: 220px"
              @change="mysubmittime"
              v-model="queryTime"
              aotocomplete="off"
              type="daterange"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
            <CInputCheckbox
              label="历史同期"
              type="radio"
              :checked.sync="heitorySamePeriod"
              value="历史同期"
              style="position: relative; top: 15px; left: 7px"
            />
          </CRow>
        </div>

        <div class="same-period-wrapper">
          <CRow class="same-period-row">
            <label class="same-period-title" style="position: relative; left:5px;top: 16px"
              >产品级别:</label
            >
            <CSelect
              horizontal
              :options="productLevelList"
              :value.sync="productLevel"
              placeholder="请选择产品级别"
              @change="selectProductLevel($event)"
              class="input"
              style="position: relative; top: 8px; width: 310px"
            />
          </CRow>
        </div>

        <div class="region-result-wrapper">
          <CCol class="region-result-col">
            <div class="tab-header">
              <span class="tab-title">区域结果</span>
              <CButton
                title="删除"
                variant="outline"
                @click="regionDel"
                class="rightIcon"
              >
                <img
                  src="@/assets/icons/delete.svg"
                  class="featuresstyle"
                  style="margin-top: -1px"
                  alt
                />
              </CButton>
            </div>
            <div class="spatial-region-row">
              <select multiple class="batchSelect">
                <option
                  v-for="(itemsli, index) in regionResultList"
                  :key="index"
                  :title="itemsli"
                  :value="itemsli.value"
                  @click="onSelectOption(itemsli, index)"
                >
                  {{ itemsli }}
                </option>
              </select>
            </div>
          </CCol>
        </div>

        <div class="same-period-wrapper1">
          <div>
            <span class="spanLabel" style="position:relative;left:-2px">
              卫星传感器选择
              <CButton
                color="info"
                size="sm"
                @click="selectAddInfo"
                class="btnSelectInfo"
                style="position:relative;top:6px"
                >选择</CButton
              >
            </span>
            <CInput
              label="卫星"
              placeholder="请点击“选择”勾选卫星信息"
              style="width: 385px"
              horizontal
              v-model="satellites"
              readonly
            />
            <CInput
              label="传感器"
              placeholder="请点击“选择”勾选传感器信息"
              horizontal
              style="width: 385px"
              v-model="sensors"
              readonly
            />
          </div>
          <CRow class="same-period-row">
            <span
              class="same-period-title"
              style="position: relative; top: 16px"
              >流程选择</span
            >
            <Select
              v-model="selectFlowID"
              filterable
              transfer
              @on-select="processingOnChange"
              style="width: 70%; margin-left: 36px; margin-top: 9px"
            >
              <Option
                v-for="item in processingList"
                :value="item.flowId"
                :key="item.flowId"
                >{{ item.flowName + "-" + item.flowId }}</Option
              >
            </Select>
          </CRow>
          <div style="margin-top: 10px">
            
            <CButton color="info" class="btn" @click="ProductProductionBtn"
              >产品生产</CButton
            >
            <CButton color="info" class="btn" @click="DataListQuery"
              >数据清单</CButton
            >
            <CButton color="info" class="btn" @click="queryDataList"
              >获取数据</CButton
            >
          </div>
        </div>

        <!-- <div class="product-list-wrapper">
          <CCol class="product-list-col">
            <div class="tab-header">
              <span class="tab-title">流程选择</span>
            </div>
            <div class="spatial-region-row">
              <Select
                v-model="selectFlowID"
                filterable
                transfer
                @on-select="processingOnChange"
                style="width: 55%; margin-left: 22px; margin-top: 6px"
              >
                <Option
                  v-for="item in processingList"
                  :value="item.flowId"
                  :key="item.flowId"
                  >{{ item.flowName + "-" + item.flowId }}</Option
                >
              </Select>
              <div style="margin-top: 100px">
                <CButton color="info" class="btn" @click="ProductProductionBtn"
                  >产品生产</CButton
                >
                <CButton color="info" class="btn" @click="DataListQuery"
                  >数据清单</CButton
                >
                <CButton color="info" class="btn" @click="queryDataList"
                  >获取数据</CButton
                >
              </div>
            </div>
          </CCol>
        </div> -->
        <Spin fix v-show="this.isSpinShow">
          <!-- <div class="demo-spin-icon-load">
            <i class="iconfont icon-loader--line"></i>
          </div> -->
          <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
          <!-- <Icon type="load-c" size="30" class="demo-spin-icon-load"></Icon> -->
          <div style="font-size: 16px">获取数据中...</div>
        </Spin>
      </div>

      <div class="task-map-wrapper">
        <div style="height: auto; background-color: #fff; border-radius: 5px">
          <div class="mapcontrol-wrapper">
            <!-- 图例注释 -->
            <div class="legendstyle">
              <Legend></Legend>
            </div>
            <div id="map" ref="themap"></div>
          </div>
        </div>

        <div>
          <div style="background: white; margin-top: 10px">
            <div style="height: 38px; padding-top: 6px">
              <CButton color="info" class="btn" @click="dataInfoTable"
                >数据明细</CButton
              >
              <CButton color="info" class="btn" @click="taskInfoTable"
                >任务数据</CButton
              >
              <div style="position: relative; right: -20%; bottom: 91%">
                <RadioGroup
                  v-model="productLevels"
                  class="m_radio_group"
                  label="产品级别"
                >
                  <Radio label="0">全部</Radio>
                  <Radio label="1">LEVEL1A</Radio>
                  <Radio label="4">LEVEL4</Radio>
                  <Radio label="5">LEVEL5</Radio>
                  <Radio label="6">LEVEL6</Radio>
                </RadioGroup>

                <CButton
                  color="info"
                  @click="getDataTableList(1)"
                  class="myCol1 listbtn"
                >
                  <CIcon name="cil-magnifying-glass" />&nbsp;搜索
                </CButton>
              </div>
            </div>
            <Table
              ref="selectionTask"
              v-show="taskTableDataShow"
              border
              max-height="300"
              heigeht="300"
              :columns="getColumnTask"
              :data="taskDataTable"
            >
              <template slot="priority" slot-scope="{ row }">
                <span v-if="row.priority == 1"> 优先 </span>
                <span v-if="row.priority == 0"> 普通 </span>
              </template>
              <template slot="taskStatus" slot-scope="{ row }">
                <button v-if="row.status == 1" class="stastusBtn executing">
                  执行中
                </button>
                <button v-if="row.status == 2" class="stastusBtn pause">
                  暂停
                </button>
                <button v-if="row.status == 3" style="color: #f9b115">
                  删除
                </button>
                <button v-if="row.status == 4" class="stastusBtn success">
                  完成
                </button>
                <button v-if="row.status == 5" class="stastusBtn success">
                  完成
                </button>
                <button v-if="row.status == 6" style="color: #f9b115">
                  超时
                </button>
                <button v-if="row.status == 7" class="stastusBtn stop">
                  停止
                </button>
                <button v-if="row.status == 8" class="stastusBtn pending">
                  待执行
                </button>
              </template>
              <template slot="action" slot-scope="{ row }">
                <CButton
                  v-c-tooltip="'查看子任务'"
                  title="查看子任务"
                  variant="outline"
                  class="btnStyle"
                  @click="getInfo(row)"
                >
                  <CIcon class="colortempstyle" name="cil-sitemap" />
                </CButton>
                <CButton
                  v-c-tooltip="'删除'"
                  title="删除"
                  variant="outline"
                  class="btnStyle"
                  @click="delTask(row)"
                >
                  <img
                    src="@/assets/icons/delete.svg"
                    class="featuresstyle"
                    style="margin-top: -1px"
                    alt
                  />
                </CButton>
              </template>
            </Table>
            <Table
              ref="selectionData"
              v-show="dataTableShow"
              border
              max-height="300"
              heigeht="300"
              resizable
              :columns="getColumnData"
              :data="dataTable"
              @on-selection-change="onselectionchange($event)"
            >
              <!--插入图片链接的代码-->
              <template slot="scope" slot-scope="{ row }">
                <img
                  :src="getimgPath(row.tumbUrl)"
                  alt=""
                  style="width: 30px; height: 30px"
                  @click="tumbInfoClicked(row)"
                />
              </template>

              <template slot="dataAction" slot-scope="{ row }">
                <CButton
                  v-c-tooltip="'上传'"
                  title="上传"
                  variant="outline"
                  class="btnStyle"
                  @click="upload(row)"
                >
                  <img
                    src="@/assets/icons/up.png"
                    class="featuresstyle"
                    style="margin-top: -1px"
                    alt
                  />
                </CButton>
                <CButton
                  v-c-tooltip="'下载'"
                  title="下载"
                  variant="outline"
                  class="btnStyle"
                  @click="download(row)"
                >
                  <img
                    src="@/assets/icons/云下载.svg"
                    class="featuresstyle"
                    style="margin-top: -1px"
                    alt
                  />
                </CButton>
              </template>
            </Table>
          </div>
          <CCardFooter class="page-link">
            <CRow>
              <CCol class="footerPage" style>
                <span class="pageContent">
                  每页
                  <CSelect
                    @change="getVendorId($event)"
                    :options="[5, 10, 15, 20, 25]"
                    v-model="pageSize"
                    class="selectStyle"
                    style
                  />
                  条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                    this.allNum
                  }}条记录)
                </span>
                <CPagination
                  :activePage.sync="currentPage"
                  :pages="total"
                  align="end"
                  v-if="total != 0"
                />
              </CCol>
            </CRow>
          </CCardFooter>
        </div>
      </div>
    </div>
    <CModal
      title="推送任务选择目录"
      color="info"
      :show.sync="showPushTaskZtreeModal"
      :closeOnBackdrop="false"
      size="lg"
      centered
    >
      <div class="treeDiv">
        <ul id="pushTaskTree" class="ztree"></ul>
      </div>

      <template #header>
        <h5>选择目录</h5>
        <CButtonClose @click="pushTaskMenuCancel" />
      </template>
      <template #footer>
        <CButton @click="pushTaskMenuOk" color="info">确定</CButton>
        <CButton @click="pushTaskMenuCancel" color="light">取消</CButton>
      </template>
    </CModal>
    <CModal
      :show.sync="delShow"
      :closeOnBackdrop="false"
      title="删除应急任务"
      centered
    >
      <template #header class="taskLookHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <p class="delKuangShow">删除应急任务</p>
      </template>
      <div class="delKuangBody">
        <p>删除应急任务时与应急任务相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delCancel" color="info" class="delAnniu">取消</CButton>
        <CButton @click="delOk" color="info">确定</CButton>
      </template>
    </CModal>
    <CModal
      title="选择信息"
      color="info"
      :show.sync="showSelectAddInfoZtreeModal"
      :closeOnBackdrop="false"
      centered
    >
      <div class="treeDiv1">
        <ul id="selectInfoTree" class="ztree"></ul>
      </div>

      <template #header>
        <h5>选择</h5>
        <CButtonClose @click="selectAddInfoCancel" />
      </template>
      <template #footer>
        <CButton @click="selectAddInfoCancel" color="light">取消</CButton>
        <CButton @click="selectAddInfoOk" color="info">确定</CButton>
      </template>
    </CModal>
  </div>
</template>
<script>
import Legend from "../../views/Legend";
//import shpData from "../../plugins/shapeFile/shapefile.js"
// import turf from "turf";
// import MapboxDraw from "mapbox-gl-draw";

export default {
  data() {
    return {
      /** 新加参数 */
      productLevels: "0",
      queryDataTableList: [],
      selectFlowID: "0",
      processingList: [],
      productLevelList: ["LEVEL1A", "LEVEL4", "LEVEL5", "LEVEL6"],
      productLevel: "LEVEL1A",
      satellites:"",
      sensors:"",

      showSelectAddInfoZtreeModal:false,
      selectInfoList: [], //选择的信息
      //addShow: false,

      /** 新加参数 */

      isSpinShow: false,
      rectangeRange: [], //矢量图外接矩形范围
      globalLineData: [],
      dataIds: [],
      allDataTableDataList: [],
      allTaskTabList: [],
      TaskStatus: "执行",
      taskID: "",
      disasterTaskStatus: 1,
      taskName: "2020-07-21-江西省-洪涝灾害",
      taskTime: "2020-07-21",
      DataQueryTime: "", //数据查询时间
      TaskAddress: "",

      TaskDisasterType: "",

      productList: [
        // { label: "水体", value: "水体指数", isCheck: true },
        // { label: "植被指数", value: "植被指数", isCheck: false },
        // { label: "灾害范围监测", value: "灾害范围监测", isCheck: false },
        // { label: "农作物毁损监测", value: "农作物", isCheck: false },
        // { label: "房屋毁损监测", value: "房屋毁损监测", isCheck: false },
        // { label: "道路毁损监测", value: "道路毁损监测", isCheck: false }
      ],
      currentProduct: "",
      regionCascader: [
        {
          label: "全国",
          value: 0,
          loading: false,
          tag: "china",
          code: 0,
          children: [],
        },
      ],

      importantRegionCascader: [],
      regionBlock: true,
      drawBlock: false,
      shpBlock: false,
      importantRegion: false,

      //矢量数据选择参数
      shpPath: "",
      showPushTaskZtreeModal: false,
      showZtreeModal: false,
      curFileType: ".shp",
      suffix: ["shp"],
      currenSelectSuffix: "shp",
      haveHeader: false,

      x1: "",
      x2: "",
      y1: "",
      y2: "",
      // lat: 40, //纬度
      // lag: 120, //经度

      regionResultList: [],
      regionResultIDList: [],
      // 区域的变量
      currentRegionName: "",
      currentRegion: [],
      currentregionType: 2,
      currentRegionCode: "",
      currentRegionQuery: {},

      //重点区域的变量
      currentImportantRegion: "",
      currentImportantRegionGeoType: "",
      currentImportantRegionCode: "",

      taskTableDataShow: false,
      dataTableShow: true,
      taskDataTable: [],
      dataTable: [],

      model10: [],
      HouseDamageRadio: "",

      currentSelectRegions: [],

      regionProviceCode: 22,
      disasterId: 1,
      CountyBounds: {
        geoType: "",
        geoValue: "",
      },
      pageSize: 15,
      currentPage: 1,
      pages: 0,
      total: 0,
      allNum: 0,
      showPop: false,
      //priority: "",
      //taskStatus: "",
      provinceInfos: [],
      clickId: 0,
      delShow: false,

      //选中的数据
      productPendingData: [],

      //查询时间
      queryTime: [],
      heitorySamePeriod: false,
      periods: [],

      // 自定义区域
      customAreaNum: 0,
      customAreaId: "",

      // 记录选中区域结果的 wkt和code
      selectRegionCode: "0",
      selectRegionWkt: "",
    };
  },
  watch: {
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      if (this.dataTableShow) {
        if (this.productLevels != "0") {
          this.getDataTableList(this.currentPage);
        } else {
          this.getPageData(this.allDataTableDataList);
        }
      } else if (this.taskTableDataShow) {
        this.getPageData(this.allTaskTabList);
      }
    },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      if (this.dataTableShow) {
        if (this.productLevels != "0") {
          this.getDataTableList(this.currentPage);
        } else {
          this.getPageData(this.allDataTableDataList);
        }
      } else if (this.taskTableDataShow) {
        this.getPageData(this.allTaskTabList);
      }
    },
  },
  beforeRouteLeave(to, from, next) {
    next();
    $(".sidebar-show").show();
  },
  beforeRouteEnter(to, from, next) {
    next();
    $(".sidebar-show").hide();
  },
  mounted() {
    this.taskID = this.$route.query.id;
    this.disasterTaskStatus = this.$route.query.status;
    this.initMap();
    this.initDraw();
    //this.taskInfoTable();
    this.dataInfoTableLst();
    this.getProcessingData();
  },
  computed: {
    getColumnTask() {
      return [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          key: "number",
          resizable: true,
          title: "序号",
          align: "center",
          width: "65",
        },
        {
          key: "groupTaskName",
          title: "任务名称",
          align: "center",
          width: "500",
          resizable: true,
        },
        {
          key: "startTime",
          title: "创建时间",
          align: "center",
          width: "200",
          resizable: true,
        },
        { slot: "priority", title: "优先级", align: "center", width: "120" },
        {
          //key: "show_details2",
          slot: "taskStatus",
          title: "任务状态",
          align: "center",
          width: "140",
          resizable: true,
        },
        {
          title: "操作",
          width: "350",
          slot: "action",
          align: "center",
        },
      ];
    },
    getColumnData() {
      return [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        { key: "number", title: "序号", align: "center", width: "65" },
        {
          key: "tumbUrl",
          title: "缩略图",
          align: "center",
          width: "130",
          resizable: true,
          slot: "scope",
        },
        {
          key: "satellite",
          title: "卫星",
          align: "center",
          width: "130",
          resizable: true,
        },
        {
          key: "sensor",
          title: "传感器",
          align: "center",
          width: "130",
          resizable: true,
        },
        {
          key: "cloud",
          title: "云量(%)",
          align: "center",
          width: "130",
          resizable: true,
        },
        {
          key: "resolution",
          title: "分辨率(米)",
          align: "center",
          width: "120",
          resizable: true,
        },
        {
          key: "productLevel",
          title: "产品级别",
          align: "center",
          width: "120",
          resizable: true,
        },
        {
          key: "createTime",
          title: "影像获取时间",
          align: "center",
          width: "210",
          resizable: true,
        },
        {
          key: "dataId",
          title: "数据Id",
          align: "center",
          width: "200",
          resizable: true,
        },
        {
          title: "操作",
          width: "210",
          slot: "dataAction",
          align: "center",
        },
      ];
    },
  },
  components: {
    Legend,
  },
  methods: {
    // 流程选择
    processingOnChange(item) {
      this.selectFlowID = item.value;
    },

    getProcessingData() {
      //debugger;
      //let path = this.GlobalUrlPath.productManage.getProduct;
      let path = this.$api.taskManageApi.queryflowProperty;
      this.http.get(path).then((res) => {
        if (res.data.code == 0) {
          this.processingList = res.data.data.dataList;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    /** 产品级别 */
    selectProductLevel(event) {
      this.productLevel = event.target.value;
    },

    /** 卫星传感器选择 */
    selectAddInfoCancel() {
      this.showSelectAddInfoZtreeModal = false;
      //this.updateShow = true;
    },
    selectAddInfoOk() {
      this.selectInfoList = [];
      //this.flowParamList = [];

      //this.curFlowId = -1;
      //this.curInputParamKey = "";
      //this.curOutputParamKey = "";

      let sateList = [];
      let sensorList = [];

      let treeObj = $.fn.zTree.getZTreeObj("selectInfoTree"),
        nodes = treeObj.getCheckedNodes(true);
      let tempNode = "";

      for (let index in nodes) {
        let isExist = false;
        tempNode = nodes[index];

        if (tempNode.pId != null) {
          for (let tempInfo of this.selectInfoList) {
            if (tempInfo.satellite == tempNode.pId) {
              if (sensorList.indexOf(tempNode.id) == -1) {
                sensorList.push(tempNode.id);
              }

              tempInfo.sensors.push(tempNode.id);
              isExist = true;
            }
          }
          if (isExist == false) {
            let tempInfo2 = {
              satellite: tempNode.pId,
              sensors: [tempNode.id],
            };
            if (sensorList.indexOf(tempNode.id) == -1) {
              sensorList.push(tempNode.id);
            }

            sateList.push(tempNode.pId);
            this.selectInfoList.push(tempInfo2);
          }
        }
      }

      let info = "";
      for (let sate of sateList) {
        if (info == "") {
          info = sate;
        } else {
          info += "," + sate;
        }
      }
      this.satellites = info;

      info = "";
      for (let sensor of sensorList) {
        if (info == "") {
          info = sensor;
        } else {
          info += "," + sensor;
        }
      }
      this.sensors = info;

      this.showSelectAddInfoZtreeModal = false;
      //this.addShow = true;

      //this.getFlowInfoList();
    },
    selectAddInfo() {
      let self = this;

      let setting = {
        check: {
          enable: true,
          nocheckInherit: false,
          checkTypeFlag: true,
          callbackFlag: true,
        },
        data: {
          simpleData: {
            enable: true,
          },
        },
        callback: {
          beforeClick: this.beforeClick,
          onClick: this.zTreeOnClick,
          onCheck: this.zTreeOnCheck,
          onExpand: this.zTreeOnClick,
        },
      };

      let path = this.$api.taskManageApi.queryRelated;
      let param = {
        pageNum: -1,
        pageSize: -1,
      };

      //debugger
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.showSelectAddInfoZtreeModal = true;
          //self.addShow = false;

          let content = res.data.data;
          let ztreeContent = [];
          let SatelliteNameList = [];
          let tempZtreeInfos = [];

          for (let item of content) {
            //当前卫星节点
            let curSatelliteName = item.satelliteName;

            if (SatelliteNameList.indexOf(curSatelliteName) == -1) {
              let isChecked = self.judgeIsChecked(curSatelliteName, "");
              let node = {
                name: curSatelliteName,
                id: curSatelliteName,
                pId: 0,
                checked: isChecked,
              };
              ztreeContent.push(node);
              SatelliteNameList.push(curSatelliteName);

              let tempInfo = {
                satellite: curSatelliteName,
                sensors: [],
              };
              tempZtreeInfos.push(tempInfo);
            }

            item.sensors.forEach((ele, i) => {
              Object.keys(ele).forEach((tempvalue) => {
                let sensor = item.sensors[i][tempvalue];
                for (let tempInfo of tempZtreeInfos) {
                  if (
                    tempInfo.satellite == curSatelliteName &&
                    tempInfo.sensors.indexOf(sensor) == -1
                  ) {
                    tempInfo.sensors.push(sensor);
                    let isChecked2 = self.judgeIsChecked(
                      curSatelliteName,
                      sensor
                    );

                    let childNode = {
                      name: sensor,
                      id: sensor,
                      pId: item.satelliteName,
                      checked: isChecked2,
                    };
                    ztreeContent.push(childNode);
                  }
                }
              });
            });
          }

          $.fn.zTree.init($("#selectInfoTree"), setting, ztreeContent);
        } else {
          self.$Message.error(res.data.message);
        }
      });
    },

    judgeIsChecked(pName, cName) {
      let content = this.selectInfoList;

      for (let i = 0; i < content.length; i++) {
        if (content[i].satellite == pName) {
          if (cName == "") {
            return true;
          } else {
            for (let j = 0; j < content[i].sensors.length; j++) {
              if (cName != "" && content[i].sensors[j] == cName) {
                return true;
              }
            }
          }
        }
      }

      return false;
    },
    /** 卫星传感器选择 */

    //查询数据的下载
    download(row) {
      //debugger
      let path =
        "http://172.17.102.4:20001/api/v1/data/dataLoad/download/?userId=101&uuid=";
      let dataId = row.dataId;
      path = path + dataId;
      let tempwindow = window.open("_blank");
      tempwindow.location = path;
    },

    // 数据上传
    upload(row) {},

    mysubmittime() {
      let time = this.queryTime;
      this.periods = [];
      if (this.heitorySamePeriod) {
        let startTime = this.queryTime[0];
        let endTime = this.queryTime[1];

        let startTimes = startTime.split("-");
        let startYear = parseInt(startTimes[0]);
        let startMonth = parseInt(startTimes[1]);
        let startDay = parseInt(startTimes[2]);

        let endTimes = endTime.split("-");
        let endYear = parseInt(endTimes[0]);
        let endMonth = parseInt(endTimes[1]);
        let endDay = parseInt(endTimes[2]);
        if (endYear - startYear == 0) {
          let tempdata = {
            startTime: startTime,
            endTime: endTime,
          };
          this.periods.push(tempdata);
        } else {
          if (
            (endMonth - startMonth == 0 && endDay - startDay > 0) ||
            endMonth - startMonth > 0
          ) {
            let yearLength = endYear - startYear;
            //let startTime1=startYear+"-"+startMonth+"-"+startDay;
            for (let i = 0; i <= yearLength; i++) {
              let startTime1 =
                startYear + i + "-" + startMonth + "-" + startDay;
              let endTime1 = startYear + i + "-" + endMonth + "-" + endDay;
              let tempdata = {
                startTime: startTime1,
                endTime: endTime1,
              };
              this.periods.push(tempdata);
              //startTime1=(startYear+i)+"-"+startMonth+"-"+startDay;
            }
          } else {
            this.queryTime = [];
            this.$Message.error(
              "请重新选择历史同期的时间，必须保证开始时间的月和日大于结束时间的月和日"
            );
            return;
          }
        }
      } else {
        let val1 = new Date("'" + this.queryTime[0] + "'");
        let startTime = this.formatDate(val1);
        let val2 = new Date("'" + this.queryTime[1] + "'");
        let endTime = this.formatDate(val2);
        let tempdata = {
          startTime: startTime,
          endTime: endTime,
        };
        this.periods.push(tempdata);
      }
    },
    //格局化日期：yyyy-MM-dd
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return myyear + "-" + mymonth + "-" + myweekday;
    },

    onselectionchange(event) {
      this.productPendingData = [];
      for (let i = 0; i < event.length; i++) {
        let tempData = {
          dataId: event[i].dataId,
          level: event[i].productLevel,
          region: event[i].region,
          thumbUrl: event[i].tumbUrl,
        };
        this.productPendingData.push(tempData);
      }
    },
    getimgPath(path) {
      return path;
    },
    getVendorId(event) {
      let tempdata = event.target.value; //获取option对应的value值
      this.pageSize = parseInt(tempdata);
    },

    //查看子任务
    getInfo(val) {
      let userLink =
        `/taskManage/allTask/${val.id}/${val.groupTaskName}` + "?" + val.number;
      this.$router.push({
        path: userLink,
        query: {
          pageNum: this.currentPage,
          from: "taskLook",
          taskType: 2,
        },
      });
    },

    //删除任务
    delTask(val) {
      this.delShow = true;
      this.clickId = val.id;
    },

    delCancel() {
      this.delShow = false;
    },

    delOk() {
      let self = this;
      this.delShow = false;
      let path = this.$api.taskManageApi.deleteCopySecond + this.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.code == 0) {
          this.$Message.success("删除成功");
          this.taskInfoTable();
        } else {
          this.$Message.error("删除失败");
        }
      });
    },

    getPageData(allDataTableDataList) {
      // let newList= this.allDataTableDataList.filter( (item) => item.label.toLowerCase() === "modis")
      if (this.taskTableDataShow) {
        let currentPage = this.currentPage;
        let pageSize = this.pageSize;
        this.taskDataTable = [];
        let beginIndex = (currentPage - 1) * pageSize;
        let lastIndex = currentPage * pageSize - 1; //9
        for (let i = beginIndex; i < allDataTableDataList.length; i++) {
          let temp = allDataTableDataList[i];

          if (i > lastIndex) break;
          this.taskDataTable.push(temp);
        }

        this.allNum = allDataTableDataList.length;
        this.total = Math.ceil(allDataTableDataList.length / this.pageSize);
        for (let i = 0; i < allDataTableDataList.length; i++) {
          if (i > lastIndex) break;
          this.taskDataTable[i].number =
            (this.currentPage - 1) * this.pageSize + i + 1;
        }
      } else if (this.dataTableShow) {
        let currentPage = this.currentPage;
        let pageSize = this.pageSize;
        this.dataTable = [];
        let beginIndex = (currentPage - 1) * pageSize;
        let lastIndex = currentPage * pageSize - 1; //9
        for (let i = beginIndex; i < allDataTableDataList.length; i++) {
          let temp = allDataTableDataList[i];

          if (i > lastIndex) break;
          this.dataTable.push(temp);
        }

        this.allNum = allDataTableDataList.length;
        this.total = Math.ceil(allDataTableDataList.length / this.pageSize);
        for (let i = 0; i < allDataTableDataList.length; i++) {
          if (i > lastIndex) break;
          this.dataTable[i].number =
            (this.currentPage - 1) * this.pageSize + i + 1;
        }
      }
    },

    // 根据产品级别进行筛选
    getDataTableList(pages1) {
      //debugger
      let currentPage = pages1;
      let pageSize = this.pageSize;
      this.dataTable = [];
      let beginIndex = (currentPage - 1) * pageSize;
      let lastIndex = currentPage * pageSize - 1; //9
      this.queryDataTableList = [];
      this.globalLineData = [];

      if (this.productLevels == "1") {
        for (let j = 0; j < this.allDataTableDataList.length; j++) {
          let temp = this.allDataTableDataList[j];
          if (temp.productLevel == "LEVEL1A" || temp.productLevel == "LEVEL1") {
            this.queryDataTableList.push(temp);
          }
        }
        for (let i = beginIndex; i < this.queryDataTableList.length; i++) {
          let temp = this.queryDataTableList[i];
          //debugger
          if (i > lastIndex) break;
          this.dataTable.push(temp);
          this.globalLineData.push(this.queryDataTableList[i].region);
        }

        //debugger
        this.allNum = this.queryDataTableList.length;
        this.total = Math.ceil(this.queryDataTableList.length / this.pageSize);
        for (let i = 0; i < this.dataTable.length; i++) {
          if (i > lastIndex) break;
          this.dataTable[i].number =
            (this.currentPage - 1) * this.pageSize + i + 1;
        }
        this.drawDataFrame();

      } else if (this.productLevels == "4") {
        for (let j = 0; j < this.allDataTableDataList.length; j++) {
          let temp = this.allDataTableDataList[j];
          if (
            temp.productLevel == "LEVEL4" ||
            temp.productLevel == "LEVEL4B" ||
            temp.productLevel == "LEVEL4D"
          ) {
            this.queryDataTableList.push(temp);
          }
        }
        for (let i = beginIndex; i < this.queryDataTableList.length; i++) {
          let temp = this.queryDataTableList[i];
          //debugger
          if (i > lastIndex) break;
          this.dataTable.push(temp);
          //let region = this.parseRegionStr(this.queryDataTableList[i].region);
          this.globalLineData.push(this.queryDataTableList[i].region);
        }
        //debugger
        this.allNum = this.queryDataTableList.length;
        this.total = Math.ceil(this.queryDataTableList.length / this.pageSize);
        for (let i = 0; i < this.dataTable.length; i++) {
          if (i > lastIndex) break;
          this.dataTable[i].number =
            (this.currentPage - 1) * this.pageSize + i + 1;
        }
        this.drawDataFrame();

      } else if (this.productLevels == "5") {
        for (let j = 0; j < this.allDataTableDataList.length; j++) {
          let temp = this.allDataTableDataList[j];
          if (temp.productLevel == "LEVEL5") {
            this.queryDataTableList.push(temp);
          }
        }
        for (let i = beginIndex; i < this.queryDataTableList.length; i++) {
          let temp = this.queryDataTableList[i];
          //debugger
          if (i > lastIndex) break;
          this.dataTable.push(temp);
          this.globalLineData.push(this.queryDataTableList[i].region);
        }

        //debugger
        this.allNum = this.queryDataTableList.length;
        this.total = Math.ceil(this.queryDataTableList.length / this.pageSize);
        for (let i = 0; i < this.dataTable.length; i++) {
          if (i > lastIndex) break;
          this.dataTable[i].number =
            (this.currentPage - 1) * this.pageSize + i + 1;
        }
        this.drawDataFrame();

      } else if (this.productLevels == "6") {
        for (let j = 0; j < this.allDataTableDataList.length; j++) {
          let temp = this.allDataTableDataList[j];
          if (temp.productLevel == "LEVEL6") {
            this.queryDataTableList.push(temp);
          }
        }
        for (let i = beginIndex; i < this.queryDataTableList.length; i++) {
          let temp = this.queryDataTableList[i];
          //debugger
          if (i > lastIndex) break;
          this.dataTable.push(temp);
          this.globalLineData.push(this.queryDataTableList[i].region);
        }
        

        //debugger
        this.allNum = this.queryDataTableList.length;
        this.total = Math.ceil(this.queryDataTableList.length / this.pageSize);
        for (let i = 0; i < this.dataTable.length; i++) {
          if (i > lastIndex) break;
          this.dataTable[i].number =
            (this.currentPage - 1) * this.pageSize + i + 1;
        }
        this.drawDataFrame();
      } else {
        for (let i = beginIndex; i < this.allDataTableDataList.length; i++) {
          let temp = this.allDataTableDataList[i];

          if (i > lastIndex) break;
          this.dataTable.push(temp);
          this.globalLineData.push(this.allDataTableDataList[i].region);
        }
        

        this.allNum = this.allDataTableDataList.length;
        this.total = Math.ceil(
          this.allDataTableDataList.length / this.pageSize
        );
        for (let i = 0; i < this.allDataTableDataList.length; i++) {
          if (i > lastIndex) break;
          this.dataTable[i].number =
            (this.currentPage - 1) * this.pageSize + i + 1;
        }
        this.drawDataFrame();
      }
    },

    // 获取city
    getCityByProviceCode() {
      let path =
        this.$api.taskManageApi.regionQueryCityByProvince +
        `${this.regionProviceCode}`;
      let cityNum;
      let cityTotal = {};
      let countyTotal = {};
      let countyType = [];
      this.http.get(path).then((res) => {
        if (res.data.code == 200) {
          this.regionCascader = [];
          let CityData = res.data.data;
          cityNum = CityData.length;
          for (let i = 0; i < cityNum; i++) {
            let num = countyType.length;
            let tempdata1 = {
              value: CityData[i].code,
              label: CityData[i].name,
              loading: false,
              number: i,
              children: [],
            };

            this.regionCascader.push(tempdata1);
          }
        }
      });
    },

    //区域值改变
    regionChangeEvent(value, selectedData) {
      let valueLen = value.length;
      let type = 1;
      let code = "0";
      if (valueLen == 1) {
        type = 1;
        code = value[0].toString() + "00";
        this.currentRegionCode = value[0].toString();
        this.currentregionType = type;
        this.currentRegionName = selectedData[0].label;
        //return;
      } else if (valueLen == 2) {
        type = 2;
        code = value[1].toString();
        this.currentRegionCode = code;
        this.currentregionType = type;
        this.currentRegionName = selectedData[1].__label;
        //code="370104";
      }

      this.drawGeometryByCode(code, type);
    },

    // 添加区域结果
    addAreaResult() {
      this.regionResultList.push(this.currentRegionName);
      let self = this;
      let tempdata1 = {
        geoType: "",
        geoValue: "",
        code: "",
      };

      tempdata1["geoType"] = "region";
      tempdata1["geoValue"] = this.currentRegionCode;
      tempdata1["code"] = this.currentRegionCode;
      this.currentRegion.push(tempdata1);

      //添加关联区域到数据库里
      let path = this.$api.taskManageApi.addAssociateArea;

      let param = {
        disasterTaskId: this.taskID,
        regionName: this.currentRegionName,
        regionCode: this.currentRegionCode,
        //regionWkt: "",
      };

      this.http.post(path, param).then((res) => {
        if (res.data.code == 200) {
          //获取区域结果ID
          this.getRegionResultId();
          this.$Message.success("添加成功");
        } else {
          //获取区域结果ID
          this.getRegionResultId();
          this.$Message.error("添加失败");
        }
      });
    },

    // 重点区域值改变
    importRegionChangeEvent(value, selectedData) {
      this.currentRegionName = selectedData[0].label;
      //this.currentImportantRegion=selectedData[0].value;

      let b = selectedData[0].value;
      let currentImportantRegions = $.parseJSON(b);
      this.currentImportantRegion = currentImportantRegions;

      this.currentImportantRegionCode = selectedData[0].code;
      if (currentImportantRegions.type == "GeometryCollection") {
        // 绘制区域
        this.drawGeometry(currentImportantRegions.geometries);
      } else {
        // 绘制区域
        this.drawGeometry(currentImportantRegions.features[0].geometry);
      }
    },
    addImportantRegion() {
      this.regionResultList.push(this.currentRegionName);
      let tempdata1 = {
        geoType: "",
        geoValue: "",
        code: "",
      };

      tempdata1["geoType"] = "polygon";
      tempdata1["geoValue"] = this.currentImportantRegion;
      tempdata1["code"] = this.currentImportantRegionCode;
      this.currentRegion.push(tempdata1);

      //添加关联区域到数据库里
      let path = this.$api.taskManageApi.addAssociateArea;

      let param = {
        disasterTaskId: this.taskID,
        regionName: this.currentRegionName,
        regionCode: this.currentImportantRegionCode,
        regionWkt: this.currentImportantRegion,
      };

      this.http.post(path, param).then((res) => {
        if (res.data.code == 200) {
          //获取区域结果ID
          this.getRegionResultId();
          this.$Message.success("添加成功");
        } else {
          //获取区域结果ID
          this.getRegionResultId();
          this.$Message.error("添加失败");
        }
      });
    },

    // 获取县
    loadRegionData(item, callback) {
      let _this = this;
      item.loading = true;
      //if(item.loading==false)
      //{
      let path =
        this.$api.taskManageApi.regionQueryAreaByCityCode +
        `${item.value}`;
      let countyType = {};
      this.http.get(path).then((res) => {
        if (res.data.code == 200) {
          let coutyData = res.data.data;
          let tempData = {};
          for (let j = 0; j < coutyData.length; j++) {
            tempData = {
              value: coutyData[j].code,
              label: coutyData[j].name,
            };
            this.regionCascader[item.number].children.push(tempData);
          }
        }
        item.loading = false;
        callback();
      });
      // }
      // else{
      //   return;
      // }
    },

    //获取产品列表
    getproductList() {
      this.productList = [];
      let path =
        this.$api.taskManageApi.disasterQueryProductions +
        `${this.disasterId}`;

      this.http.get(path).then((res) => {
        if (res.data.code == 200) {
          let ProductData = res.data.data;
          let tempDataL4Lst = [];
          let tempDataL5Lst = [];
          let tempDataL6Lst = [];
          let tempDataL4 = [];
          let tempDataL5 = [];
          let tempDataL6 = [];
          for (let i = 0; i < ProductData.length; i++) {
            if (ProductData[i].prolevel == "正射") {
              tempDataL4 = {
                label: ProductData[i].productionName,
                productionTag: ProductData[i].productionTag,
                satellite: ProductData[i].satellite,
                sensor: ProductData[i].sensor,
                isCheck: false,
              };
            } else if (ProductData[i].prolevel == "要素遥感监测") {
              tempDataL5 = {
                label: ProductData[i].productionName + "(要素遥感监测)",
                productionTag: ProductData[i].productionTag,
                satellite: ProductData[i].satellite,
                sensor: ProductData[i].sensor,
                isCheck: false,
              };
            } else {
              tempDataL6 = {
                label: ProductData[i].productionName + "(应急风险监测)",
                productionTag: ProductData[i].productionTag,
                satellite: ProductData[i].satellite,
                sensor: ProductData[i].sensor,
                isCheck: false,
              };
            }
            // let tempData = {
            //   label: ProductData[i].productionName,
            //   productionTag: ProductData[i].productionTag,
            //   satellite: ProductData[i].satellite,
            //   sensor: ProductData[i].sensor,
            //   isCheck: false,
            // };
            //this.productList.push(tempData);
            if (tempDataL4.length != 0) {
              tempDataL4Lst.push(tempDataL4);
            } else if (tempDataL5.length != 0) {
              tempDataL5Lst.push(tempDataL5);
            } else if (tempDataL6.length != 0) {
              tempDataL6Lst.push(tempDataL6);
            }
          }
          this.productList = this.productList
            .concat(tempDataL6Lst)
            .concat(tempDataL5Lst)
            .concat(tempDataL4Lst);
          // this.productList.push(tempDataL4Lst);
          // this.productList.push(tempDataL5Lst);
          // this.productList.push(tempDataL6Lst);
        }
      });
    },

    // 查询接口
    getDisasterInfoById() {
      let path =
        this.$api.taskManageApi.disasterTaskIdQuery +
        `${this.taskID}`;

      this.http.get(path).then((res) => {
        if (res.data.code == 200) {
          let TaskData = res.data.data;
          this.taskName = TaskData.name;
          this.taskTime = TaskData.createTime;
          this.TaskAddress = TaskData.regionName;
          this.TaskDisasterType = TaskData.disasterName;
          this.regionProviceCode = TaskData.regionCode;
          this.disasterId = TaskData.disasterId;

          // 获取city
          this.getCityByProviceCode();

          //获取产品列表
          this.getproductList();

          //定位省区
          let code = this.regionProviceCode + "0000";
          this.drawGeometryByCode(code, 0);

          //获取区域结果
          this.getRegionResult();

          //获取使用过数据的框显示
          //this.initProductData();

          //获取查询时间
          this.getQueryTime();
        }
      });
    },

    //获取查询时间
    getQueryTime() {
      let DataQueryTimes = this.taskName.split("-");
      let Year = parseInt(DataQueryTimes[0]);
      let Month = parseInt(DataQueryTimes[1]);
      let Day = parseInt(DataQueryTimes[2]);
      let preYear, preMonth, preDay;
      let afterYear, afterMonth, afsterDay;

      if (Month == 1) {
        preYear = Year - 1;
        preMonth = 12;
        preDay = Day;
      } else {
        preYear = Year;
        preMonth = Month - 1;
        preDay = Day;
      }

      if (Month == 12) {
        afterYear = Year + 1;
        afterMonth = 1;
        afsterDay = Day;
      } else {
        afterYear = Year;
        afterMonth = Month + 1;
        afsterDay = Day;
      }

      //当前设定的日期时间
      let date1 = preYear + "-" + preMonth + "-" + preDay;
      this.queryTime.push(date1);
      //前一月设定的日期时间
      let date2 = afterYear + "-" + afterMonth + "-" + afsterDay;
      this.queryTime.push(date2);

      let tempdata = {
        startTime: date1,
        endTime: date2,
      };
      this.periods.push(tempdata);
    },
    //获取使用过数据的框显示
    initProductData() {
      let path =
        this.$api.taskManageApi.queryAssociateDataByDisasterTaskId +
        `${this.taskID}`;
      this.http.get(path).then((res) => {
        if (res.data.code == 200) {
          let dataList = res.data.data;
          let tempData = [];

          for (let i = 0; i < dataList.length; i++) {
            let data = dataList[i];
            if (data.level == "LEVEL1A" && data.region != null) {
              let region = this.parseRegionStr1(data.region);
              this.globalLineData.push(region);
            } else if (data.level == "LEVEL4" && data.region != null) {
              let region = this.parseRegionStr1(data.region);
              this.globalLineData.push(region);
            } else if (data.level == "LEVEL5" && data.region != null) {
              let region = this.parseRegionStr1(data.region);
              this.globalLineData.push(region);
            } else if (data.level == "LEVEL6" && data.region != null) {
              let region = this.parseRegionStr1(data.region);
              this.globalLineData.push(region);
            }
          }
          this.drawDataFrame();
        } else {
          return;
        }
      });
    },

    //获取区域结果
    getRegionResult() {
      this.currentRegion = [];
      this.regionResultList = [];
      this.regionResultIDList = [];
      //设置查询区域
      let tempdata = {
        geoType: "region",
        geoValue: this.regionProviceCode,
      };
      this.currentRegion.push(tempdata);
      this.regionResultList.push(this.TaskAddress);

      let path =
        this.$api.taskManageApi.queryAssociateArea +
        `${this.taskID}`;

      this.http.get(path).then((res) => {
        if (res.data.code == 200) {
          let regionResultList = res.data.data;
          for (let i = 0; i < regionResultList.length; i++) {
            let region = regionResultList[i];
            this.regionResultList.push(region.regionName);
            let tempdata = {};
            if (region.regionWkt == "" || region.regionWkt == null) {
              tempdata = {
                geoType: "region",
                geoValue: region.regionCode,
              };
            } else {
              tempdata = {
                geoType: "polygon",
                geoValue: region.regionWkt,
                code: region.regionCode,
              };
            }
            this.currentRegion.push(tempdata);

            // 保存ID
            let tempData1 = {
              regionName: region.regionName,
              regionID: region.id,
            };
            this.regionResultIDList.push(tempData1);
          }
        }
      });
    },

    //获取区域结果ID
    getRegionResultId() {
      this.regionResultIDList = [];
      //设置查询区域
      let path =
        this.$api.taskManageApi.queryAssociateArea +
        `${this.taskID}`;

      this.http.get(path).then((res) => {
        if (res.data.code == 200) {
          let regionResultList = res.data.data;
          for (let i = 0; i < regionResultList.length; i++) {
            let region = regionResultList[i];
            // 保存ID
            let tempData1 = {
              regionName: region.regionName,
              regionID: region.id,
            };
            this.regionResultIDList.push(tempData1);
          }
        }
      });
    },

    //数据生产接口
    ProductProductionBtn() {
      if (this.disasterTaskStatus != 1) {
        return;
      }
      if (this.selectFlowID == "0") {
        this.$Message.info("请先选择流程!");
        return;
      }
      let path = this.$api.taskManageApi.productProduction;
      let currentProduct = this.currentProduct;
      let user = this.$store.state.user;
      //let productionTag="";
      let myToken = user.token;
      let productions = [];
      for (let i = 0; i < currentProduct.length; i++) {
        let Products = {};
        Products["disasterId"] = this.disasterId;
        Products["productionName"] = this.taskName;
        Products["productionTag"] = currentProduct[i].productionTag;
        productions.push(Products);
      }

      let flowId=(this.selectFlowID).toString();
      let param = {};
      if (this.selectRegionWkt == "" && this.selectRegionCode != "") {
        param = {
          //dataIds: this.dataId,
          pendingData: this.productPendingData,
          disasterTaskId: this.taskID,
          priorityLevel: 1,
          //productions: productions,
          flowId: flowId,
          regionCode: this.selectRegionCode,
          //regionWkt:this.selectRegionWkt,
          userId: user.userId,
          userName: user.userName,
        };
      } else {
        param = {
          //dataIds: this.dataId,
          pendingData: this.productPendingData,
          disasterTaskId: this.taskID,
          priorityLevel: 1,
          flowId: flowId,
          //productions: productions,
          regionCode: this.selectRegionCode,
          regionWkt: this.selectRegionWkt,
          userId: user.userId,
          userName: user.userName,
        };
      }
      this.http.post(path, param).then((res) => {
        if (res.data.code == 200) {
          let dataTableaa = [];
          this.showPop = false;
          let DataList = res.data.data;
          dataTableaa.push({
            groupTaskName: this.taskName,
            createTime: this.taskTime,
            //process: DataList[i].sensor,
            TaskStatus: this.TaskStatus,
            id: this.taskID,
          });
          //this.allDataTableDataList;
          //this.taskDataTable.push(dataTableaa);
          this.getDisasterInfoById();
          this.$Message.success("提交任务成功");
        } else {
          this.showPop = false;
          this.$Message.error("启动任务失败");
        }
      });
    },

    //查询数据接口
    queryDataList() {
      if (this.disasterTaskStatus != 1) {
        return;
      }

      // 查询时  清空地图上的缩略图
      for (let i = 0; i < this.dataIds.length; i++) {
        let layerId = this.dataIds[i] + "_image";
        let layer = this.map.getLayer(layerId);
        if (layer) {
          this.map.removeLayer(layerId);
        }
        let layerSource = this.map.getSource(layerId);
        if (layerSource) {
          this.map.removeSource(layerId);
        }
      }

      let currentProduct = this.currentProduct;
      this.dataTableShow = true;
      this.taskTableDataShow = false;
      this.globalLineData = [];

      let regions = [];
      //let levels = "";
      let satellites = this.satellites;
      let sensors = this.sensors;
      let types = "";
      let resolusions = "";

      if (this.disasterId == "1") {
        //levels = "LEVEL1A,LEVEL4";
        //satellites = "GF1,GF6,GF3,GF1B";
        //sensors = "WFV1,WFV2,WFV3,WFV4,PMS1,PMS2,SAR,PMS";
        types = "EW01,EW02,EW03,EW04,YI01,YI02,YC02";
      } else if (this.disasterId == "3") {
        //levels = "LEVEL4";
        //satellites = "GF4";
        //sensors = "PMI";
        types = "YH04";
      } else if (this.disasterId == "7") {
        //levels = "LEVEL1A,LEVEL4";
        //satellites = "GF1D,GF2";
        //sensors = "PMS1,PMS2,PMS";
      } else {
        //levels = "LEVEL1A,LEVEL4";
        //satellites = "GF1,GF6";
        //sensors = "WFV1,WFV2,WFV3,WFV4,PMS1,PMS2";
      }
      regions.push(this.currentRegionQuery);
      if (this.periods.length < 1) {
        this.$Message.error("请选择查询时间!");
        return;
      }
      //debugger
      let path = this.$api.taskManageApi.queryDataList;
      let param = {
        area: regions,
        level: this.productLevel,
        satellite: satellites,
        sensor: sensors,
        period: this.periods,
      };
      this.isSpinShow = true;
      this.http.post(path, param).then((res) => {
        if (res.data.code == 200) {
          let dataTableaa = [];
          this.showPop = false;
          let DataList = res.data.data;
          for (let i = 0; i < DataList.length; i++) {
            let region = this.parseRegionStr(DataList[i].region);
            this.globalLineData.push(region);

            dataTableaa.push({
              tumbUrl: DataList[i].tumbUrl,
              satellite: DataList[i].satellite,
              sensor: DataList[i].sensor,
              cloud: DataList[i].cloud,
              resolution: DataList[i].resolution,
              createTime: DataList[i].createTime,
              dataId: DataList[i].dataId,
              region: region,
              productLevel: DataList[i].levl,
              //sensor:DataList[i].sensor,
            });
          }
          if (types != "") {
            let params = {
              type: types,
              area: regions,
              resolution: resolusions,
              //searchTime: this.DataQueryTime,
              period: this.periods,
            };
            this.http.post(path, params).then((res) => {
              if (res.data.code == 200) {
                let DataLst = res.data.data;
                for (let i = 0; i < DataLst.length; i++) {
                  let region = this.parseRegionStr(DataLst[i].region);
                  this.globalLineData.push(region);

                  dataTableaa.push({
                    tumbUrl: DataLst[i].tumbUrl,
                    satellite: DataLst[i].satellite,
                    sensor: DataLst[i].sensor,
                    cloud: DataLst[i].cloud,
                    resolution: DataLst[i].resolution,
                    createTime: DataLst[i].createTime,
                    dataId: DataLst[i].dataId,
                    region: region,
                    productLevel: DataLst[i].levl,
                    //sensor:DataList[i].sensor,
                  });
                }
              }
              this.isSpinShow = false;
              this.allDataTableDataList = dataTableaa;
              this.getPageData(this.allDataTableDataList);

              this.drawDataFrame();
              this.$Message.success("查询数据成功");
            });
          } else {
            this.isSpinShow = false;
            this.allDataTableDataList = dataTableaa;
            //this.dataTable = dataTableaa;
            this.getPageData(this.allDataTableDataList);

            this.drawDataFrame();
            this.$Message.success("查询数据成功");
          }
        } else {
          this.showPop = false;
          this.isSpinShow = false;
          this.$Message.error("查询失败");
        }
      });
    },
    //空间范围操作切换
    regionOperator() {
      this.regionBlock = true;
      this.drawBlock = false;
      this.shpBlock = false;
      this.importantRegion = false;
    },
    drawOperator() {
      this.regionBlock = false;
      this.drawBlock = true;
      this.shpBlock = false;
      this.importantRegion = false;
    },
    shpOperator() {
      this.regionBlock = false;
      this.drawBlock = false;
      this.shpBlock = true;
      this.importantRegion = false;
    },

    // 重点区域
    importantRegionOprator() {
      this.importantRegionCascader = [];
      this.regionBlock = false;
      this.drawBlock = false;
      this.shpBlock = false;
      this.importantRegion = true;
      let path = this.$api.taskManageApi.disasterImportRegionQuery;
      this.http.get(path).then((res) => {
        if (res.data.code == 200) {
          let importantRegionLst = res.data.data;
          for (let i = 0; i < importantRegionLst.length; i++) {
            let importantRegion = importantRegionLst[i];
            let tempData2 = {
              value: importantRegion.wkt,
              label: importantRegion.name,
              code: importantRegion.code,
              number: i,
            };
            this.importantRegionCascader.push(tempData2);
          }
        }
      });
    },

    //矢量文件操作
    selecrShpPath() {
      //this.bIsScanDir = false;
      this.showPushTaskZtreeModal = true;
      this.pushTaskMenu();
    },
    pushTaskMenu(type) {
      let treeObj = $.fn.zTree.getZTreeObj("pushTaskTree");
      if (treeObj != null) {
        var nodes = treeObj.getNodes();
        for (var i = nodes.length - 1; i >= 0; i--) {
          treeObj.removeNode(nodes[i]);
        }
      }

      //1 共享 2 用户 3 推送任务扫描
      let path = this.$api.taskManageApi.fileRootPath + 1;

      this.pushTaskMenuSetting(path);
    },
    // 应急推送任务扫描目录、生产目录Ztree设置
    pushTaskMenuSetting(urlPath) {
      let checkType = { Y: "", N: "" }; //父与子的关联去掉
      let setting = {
        check: {
          enable: true,
          nocheckInherit: false,
          chkboxType: checkType,
        },
        data: {
          simpleData: {
            enable: true,
          },
        },
        callback: {
          beforeClick: this.beforeClick,
          onClick: this.zTreeOnClick,
          onCheck: this.zTreePushTaskOnCheck,
          onExpand: this.zTreeOnClick,
        },
      };

      this.http.get(urlPath).then((res) => {
        let data = res.data;
        if (data.success == true) {
          $.fn.zTree.init($("#pushTaskTree"), setting, data.data);
        }
      });
    },

    zTreePushTaskOnCheck(event, treeId, treeNode) {
      var treeObj = $.fn.zTree.getZTreeObj(treeId),
        nodes = treeObj.getCheckedNodes(true);

      // if (!treeNode.isParent) {
      //   this.$Message.error("请选择文件夹！");
      //   treeNode.checked = false;
      //   treeObj.updateNode(treeNode);
      //   return;
      // }
      if (nodes.length > 1) {
        //限制单个文件夹
        this.$Message.error("矢量数据只能选择一个！");
        treeNode.checked = false;
        treeObj.updateNode(treeNode);
        return;
      }
    },
    zTreeOnClick(event, treeId, treeNode) {
      let path = this.$api.taskManageApi.getFileListByPath;
      let param = {
        path: treeNode.id,
      };
      var treeObj = $.fn.zTree.getZTreeObj(treeId);
      var node = treeObj.getNodeByParam("id", treeNode.id);
      treeObj.selectNode(node);
      let sNode = treeObj.getSelectedNodes();
      if (sNode.length > 0) {
        let zAsync = sNode[0].zAsync;
        treeObj.reAsyncChildNodes(treeNode, "refresh");
        if (zAsync) {
        } else {
          this.http.get(path, param).then((res) => {
            let data = res.data;
            if (data.success == true) {
              treeNode.halfCheck = false;
              treeObj.addNodes(treeNode, data.data, false);
              sNode[0].zAsync = true;
            }
          });
        }
      }
    },
    pushTaskMenuOk() {
      let treeObj = $.fn.zTree.getZTreeObj("pushTaskTree"),
        nodes = treeObj.getCheckedNodes(true);
      let tempNode = "";
      let info = "";
      for (var index in nodes) {
        tempNode = nodes[index];
        if (info == "") {
          info = tempNode.id;
        } else {
          info += ";" + tempNode.id;
        }
      }
      if (info.length < 3) {
        this.$Message.error("请选择矢量(.shp)文件！");
        this.pushTaskReset();
      } else {
        let shpFileSufix = info.substr(info.length - 3, info.length);
        if (shpFileSufix == "shp" || shpFileSufix == "SHP") {
          //debugger;
          this.shpPath = info;
          this.regionResultList.push(this.shpPath);
          let shpName = info.slice(-10);
          let shpCode = shpName.substring(0, 6);
          //矢量数据后台处理
          let path = this.$api.taskManageApi.disasterShpFileQuery;
          let fileName = this.shpPath;
          // let fileName={
          //   fileName:this.shpPath,
          // }
          let param = {
            fileName: this.shpPath,
          };
          this.http.post(path, param).then((res) => {
            if (res.data.code == 200) {
              let shpDataRegion = res.data.data;
              let tempdata1 = {
                geoType: "",
                geoValue: "",
                code: "",
              };

              tempdata1["geoType"] = "polygon";
              tempdata1["geoValue"] = shpDataRegion;
              tempdata1["code"] = shpCode;
              this.currentRegion.push(tempdata1);

              //添加关联区域到数据库里
              let path = this.$api.taskManageApi.addAssociateArea;

              let param = {
                disasterTaskId: this.taskID,
                regionName: this.shpPath,
                regionCode: shpCode,
                regionWkt: shpDataRegion,
              };

              this.http.post(path, param).then((res) => {
                if (res.data.code == 200) {
                  //获取区域结果ID
                  this.getRegionResultId();
                  this.$Message.success("添加成功");
                } else {
                  //获取区域结果ID
                  this.getRegionResultId();
                  this.$Message.error("添加失败");
                }
              });

              // 绘制区域
              this.drawGeometry(shpDataRegion.features[0]);
            } else {
              this.$Message.error("读取矢量数据失败！！");
            }
          });

          // 绘制区域
          // this.drawGeometry(this.currentImportantRegion.geometries);
        } else {
          this.$Message.error("请选择矢量(.shp)文件！");
        }

        this.pushTaskReset();
      }
    },
    pushTaskMenuCancel() {
      this.pushTaskReset();
    },
    pushTaskReset() {
      var treeObj;
      this.showPushTaskZtreeModal = false;
      treeObj = $.fn.zTree.getZTreeObj("pushTaskTree");
      if (treeObj == null) return;

      var nodes = treeObj.getNodes();
      for (var i = nodes.length - 1; i >= 0; i--) {
        treeObj.removeNode(nodes[i]);
      }
    },

    changeProductInput(index) {
      this.productList.map((v, i) => {
        if (i == index && v.isCheck) {
          v.isCheck = true;
        } else if (i == index && !v.isCheck) {
          v.isCheck = false;
        }
      });
      this.getCurrentProductList();
    },
    getCurrentProductList() {
      this.currentProduct = [];
      let proLst = this.productList;
      for (let i = 0; i < proLst.length; i++) {
        if (proLst[i].isCheck) {
          this.currentProduct.push(proLst[i]);
        }
      }
    },

    //空间范围操作切换

    //以下区域结果操作
    onSelectOption(item, index) {
      this.currentSelectRegions = [];
      let obj = {};
      obj.name = item;
      obj.index = index;
      this.currentSelectRegions.push(obj);

      //绘制地图
      this.currentRegionQuery = this.currentRegion[index];
      if (this.currentRegionQuery.geoType == "region") {
        let regionCode = this.currentRegionQuery.geoValue.toString();
        let code = "";
        let type = "";
        if (regionCode.length == 2) {
          code = regionCode + "0000";
          type = 0;
        } else if (regionCode.length == 4) {
          code = regionCode + "00";
          type = 1;
        } else {
          code = regionCode;
          type = 2;
        }
        this.selectRegionCode = code;
        this.selectRegionWkt = "";
        this.drawGeometryByCode(code, type);
      } else {
        this.selectRegionCode = this.currentRegionQuery.code;
        this.selectRegionWkt = this.currentRegionQuery.geoValue;
        let currentImportantRegions;
        let b = this.currentRegionQuery.geoValue;
        let types = typeof b;
        if (types == "object") {
          currentImportantRegions = b;
        } else {
          currentImportantRegions = $.parseJSON(b);
        }
        this.currentRegionQuery.geoValue = currentImportantRegions;
        if (currentImportantRegions.type == "FeatureCollection") {
          // 绘制区域
          this.drawGeometry(currentImportantRegions.features[0]);
        } else if (currentImportantRegions.type == "Feature") {
          // 绘制区域
          this.drawGeometry(currentImportantRegions.geometry);
        } else {
          // 绘制区域
          this.drawGeometry(currentImportantRegions.geometries);
        }
      }
    },
    regionDel() {
      let options = this.currentSelectRegions;
      if (options[0].index == 0) {
        alert("不可删除首个省市的区域！！！");
        return;
      }
      let regionIDIndex = options[0].index - 1;
      let regionResultId = this.regionResultIDList[regionIDIndex].regionID;
      for (let i = 0; i < options.length; i++) {
        this.regionResultList.splice(options[i].index, 1);
        this.currentRegion.splice(options[i].index, 1);
        this.regionResultIDList.splice(options[i].index - 1, 1);
      }
      let path =
        this.$api.taskManageApi.deleteAssociateArea +
        `${regionResultId}`;

      this.http.delete(path).then((res) => {
        if (res.data.code == 200) {
          //获取区域结果ID
          this.getRegionResultId();
          this.$Message.success("删除成功");
        } else {
          //获取区域结果ID
          this.getRegionResultId();
          this.$Message.error("删除失败");
        }
      });
    },
    //以上区域结果操作

    dataInfoTable() {
      this.taskTableDataShow = false;
      this.dataTableShow = true;
      //this.queryDataList();
    },

    //初始化数据表格内容
    dataInfoTableLst() {
      this.dataId = [];
      let path =
        this.$api.taskManageApi.queryAssociateDataByDisasterTaskId +
        `${this.taskID}`;
      this.http.get(path).then((res) => {
        if (res.data.code == 200) {
          let dataList = res.data.data;
          for (let i = 0; i < dataList.length; i++) {
            let data = dataList[i];
            this.dataIds.push(data.dataId);
          }

          let dataTableaa = [];
          this.globalLineData = [];
          for (let j = 0; j < this.dataIds.length; j++) {
            let DataIdPath =
              this.$api.taskManageApi.queryDataByDataId +
              `${this.dataIds[j]}`;
            this.http.get(DataIdPath).then((res) => {
              debugger;
              if (res.data.code == 200) {
                let datas = res.data.data[0];
                let region = JSON.parse(datas.coordinates);
                this.globalLineData.push(region);

                dataTableaa.push({
                  tumbUrl: datas.thumbimage_path,
                  satellite: datas.satellite,
                  sensor: datas.sensor,
                  cloud: datas.cloud,
                  resolution: datas.resolution,
                  createTime: datas.receivetime,
                  dataId: this.dataIds[j],
                  region: region,
                  productLevel: datas.level,
                });

                this.allDataTableDataList = dataTableaa;
                this.getPageData(this.allDataTableDataList);
                this.drawDataFrame();
              }
            });
          }
        }
      });
    },

    taskInfoTable() {
      this.taskTableDataShow = true;
      this.dataTableShow = false;

      let path = this.$api.taskManageApi.queryCopySecond;
      let param = {
        disasterTaskId: this.taskID,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.code == 0) {
          let dataList = res.data.data.dataList;
          let tempData = [];

          for (let i = 0; i < dataList.length; i++) {
            tempData.push({
              number: i + 1,
              groupTaskName: dataList[i].groupTaskName,
              startTime: dataList[i].startTime,
              priority: dataList[i].priority,
              status: dataList[i].status,
              id: dataList[i].id,
            });
          }
          this.allTaskTabList = tempData;
          this.getPageData(this.allTaskTabList);
        } else {
          this.$Message.error("查询失败");
        }
      });
    },
    // 初始化加载地图  地图上的操作事件 放大 缩小 绘制图框
    initMap() {
      let that = this;
      that.showPop = true;
      that.$loading.show();
      let simple = {
        //四维地球
        version: 8,
        sources: {
          img: {
            type: "raster",
            tiles: [
              "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            ],
          },
        },
        layers: [
          {
            id: "background",
            type: "background",
            paint: {
              "background-color": "#DDDDDD",
            },
          },
          {
            id: "imgtest",
            type: "raster",
            source: "img",
            "source-layer": "bejing_img",
          },
        ],
      };

      // 初始化地图
      this.map = new mapboxgl.Map({
        container: "map", // container id
        style: "./static/map/map.json",
        // "http://121.36.21.73:20002/api/pie-cloud/layerData/layerTemplates?id=2c92808c71bafa7a01720c80d12f010c&key=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbmZvIjoie1widXNlcklkXCI6XCIxMDFcIixcImtleVwiOlwiOTBjNGI5NDI0N2FiMThmYmRiZTMyZDc4NzBkMTVjN2JcIn0ifQ.ifWlOcwmtenARlro-tf9hdLDlXjmbIa2T5AwSvRQB-M",
        // simple, //四维地球
        // "http://121.36.21.73:20002/api/pie-cloud/layerData/layerTemplates?id=2c92808c71bafa7a01720c80d12f010c&key=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbmZvIjoie1widXNlcklkXCI6XCIxMDFcIixcImtleVwiOlwiOTBjNGI5NDI0N2FiMThmYmRiZTMyZDc4NzBkMTVjN2JcIn0ifQ.ifWlOcwmtenARlro-tf9hdLDlXjmbIa2T5AwSvRQB-M", // stylesheet location
        center: [108.4, 39.9],
        zoom: 3, // starting zoom
        minZoom: 1,
        epsg: 4326,
        doubleClickZoom: false,
      });

      // 地图加载完成  进行绘制的操作
      this.map.on("load", function () {
        window.dispatchEvent(new Event("resize"));
        that.showPop = false;
        that.$loading.hide();
        that.getDisasterInfoById();
        // let tempgeometry = that.getQueryGeometry();
        // that.getqueryInfoByRange(tempgeometry);
      });

      // 获取地图的层级,判断绘制类型
      this.map.on("zoom", function () {
        // 地图放大回调方法  清除热力图，绘制图框
        if (that.map.getZoom() > 2 && that.mapzoom == "on") {
          that.mapzoom = "off";
          //   let tempgeometry = that.getQueryGeometry();
          //   that.getqueryInfoByRange(tempgeometry);
        }
      });

      // 地图平移后 发送请求 进行绘制的操作
      this.map.on("dragend", function () {
        // 重新请求添加
        // let tempgeometry = that.getQueryGeometry();
        // that.getqueryInfoByRange(tempgeometry);
      });

      //地图的标点
      // let marker = new mapboxgl.Marker()
      // .setLngLat([this.lag, this.lat])
      // .addTo(this.map);
      //获取经纬度
      // this.map.on("mouseMove", function (e) {
      //   console.log(e);
      //   this.lag=e.lngLat.lng;
      //   this.lat=e.lngLat.lat;

      // });
      this.map.addControl(new mapboxgl.NavigationControl(), "top-left"); // 放大、缩小、指北针控件
    },

    // 自定义绘图工具
    initDraw() {
      this.draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
          polygon: true,
          // line_string: true,
          // point: true,
          trash: true,
        },
      });
      this.map.addControl(this.draw);
      this.map.on("draw.create", this.createArea);
      this.map.on("draw.delete", this.deleteArea);
      this.map.on("draw.update", this.updateArea);

      this.setMapboxDrawStyle(); //设置绘制Polygon样式
    },
    updateArea(e) {
      //debugger;
      // var data = this.draw.getAll();
      // if (data.features.length > 0) {
      //   var area = turf.area(data);
      //   var rounded_area = Math.round(area * 100) / 100;
      // } else {
      //   if (e.type !== "draw.delete")
      //     alert("Use the draw tools to draw a polygon!");
      // }
    },
    createArea(e) {
      //debugger;
      let features = e.features[0];
      this.currentRegionName = "自定义区域" + Math.ceil(Math.random() * 300);
      this.customAreaId = features.id;
      this.regionResultList.push(this.currentRegionName);

      let tempdata1 = {
        geoType: "",
        geoValue: "",
      };

      tempdata1["geoType"] = "polygon";
      tempdata1["geoValue"] = features;
      this.currentRegion.push(tempdata1);
      //添加关联区域到数据库里
      let path = this.$api.taskManageApi.addAssociateArea;

      let param = {
        disasterTaskId: this.taskID,
        regionName: this.currentRegionName,
        //regionCode: this.currentRegionCode,
        regionWkt: features,
      };

      this.http.post(path, param).then((res) => {
        if (res.data.code == 200) {
          //获取区域结果ID
          this.getRegionResultId();
          this.$Message.success("添加成功");
          //this.customAreaNum++;
        } else {
          //获取区域结果ID
          this.getRegionResultId();
          this.$Message.error("添加失败");
        }
      });
    },

    deleteArea(e) {
      //debugger;
    },
    setMapboxDrawStyle() {
      this.draw.options.styles[2].paint = {
        "circle-radius": 3,
        "circle-color": "green",
      };
      //未选中状态，polygon边框样式
      this.draw.options.styles[3].paint = {
        "line-color": "green",
        "line-width": 2,
      };
      //选中状态，polygon边框样式
      this.draw.options.styles[4].paint = {
        "line-color": "green",
        "line-dasharray": [0.2, 2],
        "line-width": 2,
      };

      //选中状态，polygon拐点的内部样式
      this.draw.options.styles[8].paint = {
        "circle-color": "green",
        "circle-radius": 3,
      };

      //选中拐点时，拐点的内部样式
      this.draw.options.styles[12].paint = {
        "circle-radius": 5,
        "circle-color": "green",
      };

      //拖动时，polygon边的中心点样式
      this.draw.options.styles[19].paint = {
        "circle-radius": 3,
        "circle-color": "green",
      };
      //取消选中时的闪烁状态，polygon边框样式
      this.draw.options.styles[20].paint = {
        "line-color": "green",
        "line-width": 2,
      };
      //绘制时和拖动时，polygon边框样式
      this.draw.options.styles[21].paint = {
        "line-color": "green",
        "line-dasharray": [0.2, 2],
        "line-width": 2,
      };
      //绘制第一条边时，边框样式
      this.draw.options.styles[23].paint = {
        "line-color": "green",
        "line-dasharray": [0.2, 2],
        "line-width": 2,
      };

      //选中闪烁或拖动时，拐点的内部样式
      this.draw.options.styles[25].paint = {
        "circle-radius": 3,
        "circle-color": "green",
      };

      //点击拖动拐点时，拐点的内部样式
      this.draw.options.styles[29].paint = {
        "circle-radius": 5,
        "circle-color": "green",
      };
    },

    DataListQuery() {
      this.$router.push({
        path: "/taskManage/LookDataList",
        query: {
          id: this.taskID,
        },
      });
    },

    drawGeometryByCode(code, type) {
      let _this = this;
      let path = this.$api.taskManageApi.queryFeatureBase64;

      let param = {
        collectionName: "area_info",
        orderColName: "",
        queryConditionList: [
          {
            compareOp: "=",
            fieldName: "type",
            fieldValue: type,
            relationNextOne: "AND",
          },
          {
            compareOp: "=",
            fieldName: "code",
            fieldValue: code,
          },
        ],
        queryResultList: ["wkb_geometry"],
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      _this.http.postText(path, sendData).then((res) => {
        let data = res.data.data;
        if (res.data.code == 0) {
          let geometry = [];
          if (data.data.length < 1) {
            _this.$Message.info("获取范围失败");
            return;
          }
          geometry.push(data.data[0].geometry);
          _this.drawGeometry(geometry);
        } else {
          _this.$Message.error(res.data.message);
        }
      });
    },
    //根据范围渲染地图矢量范围
    drawGeometry(item) {
      let self = this;
      let geometries;
      if (item.type == "Feature") {
        let coordinates = item.geometry.coordinates;
        self.showToCenter(coordinates);
        geometries = item.geometry;
      } else if (item.type == "Polygon") {
        let coordinates = item.coordinates;
        self.showToCenter(coordinates);
        geometries = item;
      } else if (item.type == "MultiPolygon") {
        let coordinates = item.coordinates;
        self.showToCenter(coordinates);
        geometries = item;
      } else {
        let coordinates = item[0].coordinates;
        geometries = item[0];
        self.showToCenter(coordinates);
      }

      if (item.length == 0) {
        self.resetMap();
      } else {
        if (self.map.getSource("maine") != null) {
          self.map.getSource("maine").setData(geometries);
        } else {
          self.map.addSource("maine", {
            type: "geojson",
            data: {
              type: "Feature",
              geometry: geometries,
            },
          });
          self.map.addLayer({
            id: "area",
            type: "fill",
            source: "maine",
            layout: {},
            paint: {
              "fill-color": "#088",
              "fill-opacity": 0.5,
            },
          });
        }
      }
    },
    showToCenter(coordinates) {
      // 计算 并 移动到中心点
      let minGlobalX = 180,
        minGlobalY = 90,
        maxGlobalX = -180,
        maxGlobalY = -90;

      for (let lineDatas of coordinates) {
        for (var i = 0; i < lineDatas.length; i++) {
          let gLineData = lineDatas[i];
          if (gLineData.length <= 0) continue;

          for (let j = 0; j < gLineData.length; j++) {
            if (minGlobalX > parseFloat(gLineData[j][0])) {
              minGlobalX = parseFloat(gLineData[j][0]);
            }
            if (maxGlobalX < parseFloat(gLineData[j][0])) {
              maxGlobalX = parseFloat(gLineData[j][0]);
            }
            if (minGlobalY > parseFloat(gLineData[j][1])) {
              minGlobalY = parseFloat(gLineData[j][1]);
            }
            if (maxGlobalY < parseFloat(gLineData[j][1])) {
              maxGlobalY = parseFloat(gLineData[j][1]);
            }
          }
        }
      }

      if (
        minGlobalX == 180 &&
        minGlobalY == 90 &&
        maxGlobalX == -180 &&
        maxGlobalY == -90
      ) {
        return;
      }

      let centerGlobalX = 0;
      let centerGlobalY = 0;
      if (maxGlobalX === -180 && minGlobalX === 180) {
        centerGlobalX = 116.4;
        centerGlobalY = 39.9;
      } else {
        centerGlobalX = (minGlobalX + maxGlobalX) / 2;
        centerGlobalY = (minGlobalY + maxGlobalY) / 2;
      }

      let centermoddle = [];
      centermoddle.push(centerGlobalX);
      centermoddle.push(centerGlobalY);
      //视图范围比数据范围大20%
      let viewWidth = 0;
      let viewHeight = 0;
      if (maxGlobalX === -180 && minGlobalX === 180) {
        viewWidth = (minGlobalX - maxGlobalX) * 1.2;
        viewHeight = (minGlobalY - maxGlobalY) * 1.2;
      } else {
        viewWidth = (maxGlobalX - minGlobalX) * 1.2;
        viewHeight = (maxGlobalY - minGlobalY) * 1.2;
      }

      let ratio = Math.sqrt(Math.sqrt(Math.sqrt(2))); //视图范围每扩大或缩小ratio倍，缩放等级对应减少或增加0.125

      let indexX = 6; //初始缩放等级为7
      let zoomBaseX = 5.96; //缩放等级为7时，经度范围为5.96
      if (viewWidth > zoomBaseX) {
        //如果实际范围比基准范围大，基准范围按比例扩大，直至大于实际范围，获取此时缩放等级
        while ((zoomBaseX = zoomBaseX * ratio) < viewWidth) {
          indexX -= 0.125;
        }
      } else {
        //如果实际范围比基准范围小，基准范围按比例缩小，直至小于实际范围，获取此时缩放等级
        while ((zoomBaseX = zoomBaseX / ratio) > viewWidth) {
          indexX += 0.125;
        }
      }

      let indexY = 6; //初始缩放等级为7
      let zoomBaseY = 1.91; //缩放等级为7时，纬度范围为1.91
      if (viewHeight > zoomBaseY) {
        while ((zoomBaseY = zoomBaseY * ratio) < viewHeight) {
          indexY -= 0.125;
        }
      } else {
        while ((zoomBaseY = zoomBaseY / ratio) > viewHeight) {
          indexY += 0.125;
        }
      }

      //在经纬度分别获取的缩放等级中，获取比较小的值作为缩放等级，确保数据能完全显示
      let index = indexX < indexY ? indexX : indexY;
      this.map.flyTo({
        center: centermoddle,
        zoom: index, // 缩放比例
      });
    },
    //解析region字符串，获取数据框坐标点
    parseRegionStr(regionStr) {
      let region = regionStr.substr(
        regionStr.indexOf("(") + 2,
        regionStr.indexOf(")")
      );
      let regionList = region.split(",");
      let regionData = [];

      for (let i = 0; i < regionList.length; i++) {
        let coordinate = regionList[i].split(" ");
        if (coordinate.length > 1) {
          regionData.push([
            parseFloat(coordinate[0]),
            parseFloat(coordinate[1]),
          ]);
        }
      }
      return regionData;
    },
    //解析region字符串，获取数据框坐标点
    parseRegionStr1(regionStr) {
      // [[114.869,32.0466],[116.844,31.6917],[116.371,29.8398],[114.434,30.1924],[114.869,32.0466]]
      //debugger;
      // let region = regionStr.substr(
      //   regionStr.indexOf("[") + 2,
      //   regionStr.indexOf("]")
      // );
      //regionStr.slice(2,regionStr.length-)
      let regionList = regionStr.split(",");
      let regionData = [];

      // for (let i = 0; i < regionList.length; i++) {
      //   let coordinate = regionList[i].split(" ");
      //   if (coordinate.length > 1) {
      //     regionData.push([
      //       parseFloat(coordinate[0]),
      //       parseFloat(coordinate[1]),
      //     ]);
      //   }
      // }
      return regionData;
    },
    //绘制数据框
    drawDataFrame() {
      //清理数据框
      if (this.map.getLayer("GreenLineId")) {
        this.map.removeLayer("GreenLineId");
      }
      if (this.map.getSource("greenline")) {
        this.map.removeSource("greenline");
      }

      // 绿框的数据源
      let _Greengeojson = {
        type: "FeatureCollection",
        features: [],
      };

      for (let lineData of this.globalLineData) {
        let _tempFeature = {
          type: "Feature",
          epsg: 3857,
          properties: {
            valuecolor: "#ff0000",
          },
          geometry: {
            type: "Polygon",
            coordinates: [lineData],
          },
        };
        _Greengeojson.features.push(_tempFeature);
      }

      // 2--绿色
      this.map.addSource("greenline", {
        type: "geojson",
        data: _Greengeojson,
      });
      this.map.addLayer({
        id: "GreenLineId",
        type: "line",
        source: "greenline",

        layout: {},
        paint: {
          "line-color": "green",
          "line-width": 1,
          "line-opacity": 0.8,
        },
      });

      let coordinates = [];
      coordinates.push(this.globalLineData);
      this.showToCenter(coordinates);
    },
    //缩略图点击事件
    tumbInfoClicked(row) {
      let layerId = row.dataId + "_image";
      //debugger;
      if (!this.map.getLayer(layerId)) {
        let tempImageCoordinate = []; //绘制缩略图需要四个点坐标   绘制矩形框需要5个点坐标
        for (let i = 0; i < row.region.length - 1; i++) {
          tempImageCoordinate[i] = row.region[i];
        }

        this.map.addLayer({
          id: layerId,
          source: {
            type: "image",
            url: row.tumbUrl,
            coordinates: tempImageCoordinate,
          },
          type: "raster",
        });
      } else {
        this.map.removeLayer(layerId);
        if (this.map.getSource(layerId)) {
          this.map.removeSource(layerId);
        }
      }
    },

    //以下绘图操作
    drawRectangle() {},
    drawCircle() {},
    drawPolygon() {},
    reset() {},
    //以上绘图操作
  },
};
</script>
<style scoped>
/* spin 加载中... */
/* 旋转效果 */
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 遮罩 */
/* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
.ivu-spin-fix {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 100%, 0.8);
}
/* spin 加载中... */

.m_radio_group {
  height: 16px;
  margin-top: -5px;
}
.m_radio_group label {
  margin: 0;
  margin-right: 14px;
}

.btnSelectInfo {
  width: 70px;
  height: 35px;
  font-size: 14px;
  margin-left: 18px;
  margin-bottom: 15px;
}

* {
  margin: 0;
  padding: 0;
}
.legendstyle {
  display: flex;
  position: absolute;
  z-index: 2;
  bottom: 104px;
  margin-left: 18px;
}

span {
  margin-left: 7px;
}

.descRow {
  width: 100%;
  margin: 5px 2px;
}
.desc-select {
  width: 96%;
}
.btn {
  margin-left: 5px;
  margin-right: 5px;
  width: 68px;
  height: 28px;
}
.btn-sm {
  margin-left: 5px;
  margin-right: 5px;
  width: 48px;
  height: 31px;
}
.inputcommon {
  /* margin: 3px 2px; */
  margin: 3px 1px !important;
}
.regionBlock {
  display: flex;
  margin-top: 10px;
  margin-left: 12px;
}

.batchSelect {
  width: 97%;
  height: 130px;
  overflow: auto;
  border: none;
  margin-left: 10px;
}
.rightIcon {
  position: absolute;
  right: 0px;
  width: 22px;
  height: 22px;
}
.task-monitorTable-row {
  margin-top: 22px;
  background: rgba(255, 255, 255, 1);
}
.inputRadio {
  display: inline-block;
  width: 36%;
  margin-left: 18px;
}
.selectimgstyle {
  width: 4px;
  height: 18px;
  margin-top: -4px;
  margin-left: 15px;
}

.tab-title {
  width: 120px;
  height: 25px;
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 25px;
}

/* ********** */
.tab-header {
  position: relative;
  top: 10px;

  width: 100%;
  display: flex;
  border-bottom: 1px solid rgba(221, 228, 237, 1);
}

.left-group1 {
  width: 180px;
}

.carouse {
  border-radius: 5px;
  position: relative;
  height: 177px;
  width: 100%;
  margin-top: 10px;
  background-color: white;
  border: 1px solid #dde4ed;
}

.mapselect {
  display: flex;
  position: absolute;
  z-index: 2;
  width: auto;
  height: auto;
  margin-left: 20px;
  top: 20px;
  border-radius: 5px;
}
.cityselect {
  height: 35px;
  width: 322px;
  float: left;
  background: rgba(37, 37, 37, 0.5);
  color: #d0d0d0;
  border-radius: 5px;
}

.timeselect {
  height: 35px;
  float: right;
  width: 465px;
  margin-left: 16px;
  background: rgba(37, 37, 37, 0.5);
  color: #d0d0d0;
  border-radius: 5px;
}

.timeselect .btn.info {
  height: 26px;
}

.timeselect .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.adminfontsize {
  font-size: 13px;
}

.el-button.is-round {
  border-radius: 6px;
  padding: 12px 23px;
  margin-left: 5px;
}

.demonstration {
  margin-left: 10px;
}

.bg {
  background: rgba(255, 255, 255, 0.78);
  color: #383838;
  border-color: #fff;
}

.task-map-wrapper {
  position: relative;
  background-color: #e8e8e8;
  height: auto;
  width: calc(100% - 410px);
  margin-left: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.emergencyTask-vue .mapcontrol-wrapper {
  position: relative;
  margin: 2px -9px 0 10px;
  height: 580px;
}

/* 媒体查询1366 */
@media (min-width: 1366px) and (max-width: 1600px) {
}

.carouseSty {
  position: relative;
  width: 1395px;
  margin-left: 43px;
}

.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.btnStyle {
  padding: 0;
  margin: 0 3px;
}
.btnStyle:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.cprocssstyle {
  height: 15px;
  margin-left: 2px;
  margin-right: 2px;
}
.btn-info:hover {
  color: #fff;
  background-color: rgb(105, 140, 247);
  border-color: rgb(78, 105, 189);
}
.treeDiv1 {
  height: 500px;
  width: 465px;
  overflow-y: auto;
}
.treeDiv {
  height: 500px;
  width: 760px;
  overflow-y: auto;
}
.spatial-region-wrapper1 {
  position: relative;
  height: 150px;
  background-color: white;
  margin-top: 8px;
  border-radius: 5px;
}
.btn-info {
  color: #fff;
  background-color: #3c6ef0;
  border-color: #3c6ef0;
  height: 26px !important;
}
</style>